<template>
    <div class="about">
        <h3>count:{{data.count}}</h3>
        <h3>double:{{data.double}}</h3>
        <h3>
            <button @click="add">+</button>
        </h3>
    </div>
</template>
<script>
    import {reactive, computed} from 'vue';

    export default {
        //入口
        setup() {
            const data = reactive({
                count: 1,
                double: computed(() => data.count * 2)
            });

            function add() {
                data.count++;
            }

            return {data, add};
        }
    }
</script>
